<template>
	<z-paging ref="paging" v-model="venuelist" @query="getList">
		<template slot="top">
			<view style="padding: 3vw 0;">
				<u-swiper :list="info" height="320rpx" previousMargin="30" nextMargin="30" circular :autoplay="false"
					radius="5" bgColor="#ffffff"></u-swiper>
			</view>
			<u-tabs :current="current" @change="setCurrent"
				:list="[{ name: '游泳票' }, { name: '泳训卡' }, { name: '时间卡' }, { name: '计次卡' }]" lineHeight="8rpx"
				lineWidth="70rpx" :scrollable="false"></u-tabs>
		</template>
		<view class="" v-for="(im, inx) in venuelist" :key="inx">
			<template v-if="current === 0">
				<view class="d-p-l-30 d-p-r-30" v-if="im.type == 'ticket'">
					<view class="d-list-box d-m-t-20 d-p-20 d-flex d-col-top" v-for="(item, index) in im.list"
						:key="index" @click="ticketDetail(item,im)">
						<u-image :src="picture" width="148rpx" height="148rpx" shape="circle"></u-image>
						<view class="d-m-l-20 d-flex-1">
							<view class="d-m-t-60 d-font-30 d-red">
								<text class="d-font-24">￥</text>
								<text class="d-bold">{{item.leastprice}}</text>
							</view>
							<view class="d-font-30 u-line-1 d-white">票名：{{item.consumetype}}{{item.chargetype}}</view>
							<view class="d-font-30 u-line-1 d-xuxian"></view>
							<view class="d-font-30 u-line-1 d-white">场馆：{{item.venue_name}}</view>
							<!-- <view class="d-flex d-m-t-18">
								<view class="d-tag d-flex">{{ item.specify }}</view>
							</view>
							<view class="d-font-24 d-be d-m-t-20">{{ item.tip }}</view>
							<view class="d-font-24 d-be d-m-t-20" style="margin-left: 47rpx;">{{ item.text }}</view> -->

						</view>
					</view>
				</view>
			</template>
			<template v-if="current === 1">
				<view class="d-p-l-30 d-p-r-30" v-if="im.type == 'yongxun_card'">
					<view class="d-list-box1 d-m-t-20 d-p-20 d-flex d-col-top" v-for="(item, index) in im.list"
						:key="index" @click="cardDetail(item,im)">
						<u-image :src="picture" width="148rpx" height="148rpx" shape="circle"></u-image>
						<view class="d-m-l-20 d-flex-1">
							<view class="d-m-t-60 d-font-30 d-red">
								<text class="d-font-24">￥</text>
								<text class="d-bold">{{item.saleprice}}</text>
							</view>
							<view class="d-font-30 u-line-1 d-white">票名：{{item.cardtype}}</view>
							<view class="d-font-30 u-line-1 d-xuxian"></view>
							<view class="d-font-30 u-line-1 d-white">场馆：{{item.venue_name}}</view>
							<!-- <view class="d-flex d-m-t-18">
								<view class="d-tag d-flex">{{ item.specify }}</view>
							</view>
							<view class="d-font-24 d-be d-m-t-20">{{ item.tip }}</view>
							<view class="d-font-24 d-be d-m-t-20" style="margin-left: 47rpx;">{{ item.text }}</view> -->

						</view>
					</view>
				</view>
			</template>
			<template v-if="current === 2">
				<view class="d-p-l-30 d-p-r-30" v-if="im.type == 'time_card'">
					<view class="d-list-box2 d-m-t-20 d-p-20 d-flex d-col-top" v-for="(item, index) in im.list"
						:key="index" @click="cardDetail(item,im)">
						<u-image :src="picture" width="148rpx" height="148rpx" shape="circle"></u-image>
						<view class="d-m-l-20 d-flex-1">
							<view class="d-m-t-60 d-font-30 d-red">
								<text class="d-font-24">￥</text>
								<text class="d-bold">{{item.saleprice}}</text>
							</view>
							<view class="d-font-30 u-line-1 d-white">票名：{{item.cardtype}}</view>
							<view class="d-font-30 u-line-1 d-xuxian"></view>
							<view class="d-font-30 u-line-1 d-white">场馆：{{item.venue_name}}</view>
							<!-- <view class="d-flex d-m-t-18">
								<view class="d-tag d-flex">{{ item.specify }}</view>
							</view>
							<view class="d-font-24 d-be d-m-t-20">{{ item.tip }}</view>
							<view class="d-font-24 d-be d-m-t-20" style="margin-left: 47rpx;">{{ item.text }}</view> -->

						</view>
					</view>
				</view>
			</template>
			<template v-if="current === 3">
				<view class="d-p-l-30 d-p-r-30" v-if="im.type == 'num_card'">
					<view class="d-list-box1 d-m-t-20 d-p-20 d-flex d-col-top" v-for="(item, index) in im.list"
						:key="index" @click="cardDetail(item,im)">
						<u-image :src="picture" width="148rpx" height="148rpx" shape="circle"></u-image>
						<view class="d-m-l-20 d-flex-1">
							<view class="d-m-t-60 d-font-30 d-red">
								<text class="d-font-24">￥</text>
								<text class="d-bold">{{item.saleprice}}</text>
							</view>
							<view class="d-font-30 u-line-1 d-white">票名：{{item.cardtype}}</view>
							<view class="d-font-30 u-line-1 d-xuxian"></view>
							<view class="d-font-30 u-line-1 d-white">场馆：{{item.venue_name}}</view>
							<!-- <view class="d-flex d-m-t-18">
								<view class="d-tag d-flex">{{ item.specify }}</view>
							</view>
							<view class="d-font-24 d-be d-m-t-20">{{ item.tip }}</view>
							<view class="d-font-24 d-be d-m-t-20" style="margin-left: 47rpx;">{{ item.text }}</view> -->

						</view>
					</view>
				</view>
			</template>
		</view>
		<customer-Kefu ></customer-Kefu>
	</z-paging>
</template>

<script>
	import {
		bannerlist,
		venuecard
	} from '@/common/api';
	import customerKefu from '../../components/customerKefu/customerKefu.vue';
	export default {
		components: {
			customerKefu
		},
		data() {
			return {
				current: 0,
				list: [],
				picture: '../../static/qita/icon12.png',
				info: [],
				venuelist: [],
			};
		},
		onLoad(e) {
			console.log(e)
			if (!uni.getStorageSync('token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
		},
		methods: {
			getList() {
				bannerlist({
						venue_id: uni.getStorageSync('venue_id')
					})
					.then(res => {
						console.log(res, '666')
						this.info = res;
					})

				venuecard({
						venue_id: uni.getStorageSync('venue_id')
					})
					.then(res => {
						console.log(res, '9966')
						this.$refs.paging.complete(res);
					})
					.catch(err => {
						this.$ref.paging.complete(false);
					});
			},
			setCurrent(e) {
				this.current = e.index;
				this.$refs.paging.reload(false);
			},
			ticketDetail(item, im) {
				uni.$u.route({
					url: '/pageA/ticket_catalog/index',
					params: {
						id: item.id,
						current: this.current,
						cardType: im.type,
					}
				});
			},
			cardDetail(item, im) {
				console.log(item, im, '9966')
				if (this.current == 0) {
					uni.$u.route({
						url: '/pageA/card_yongxun/index',
						params: {
							id: item.id,
							current: this.current,
							cardType: im.type,
						}
					});
				} else if (this.current == 1) {
					// uni.$u.route({
					// 	url: '/pageA/card_yongxun/index',
					// 	params: {
					// 		id: item.id,
					// 		current: this.current,
					// 		cardType: im.type,
					// 	}
					// });
					uni.$u.route({
						url: '/pageA/timesspa/timesspa',
						params: {
							id: item.id,
							current: this.current,
							cardType: im.type,
						}
					});
				} else if (this.current == 2) {
					uni.$u.route({
						url: '/pageA/timespa/timespa',
						params: {
							id: item.id,
							current: this.current,
							cardType: im.type,
						}
					});
				} else if (this.current == 3) {
					// uni.$u.route({
					// 	url: '/pageA/timesspa/timesspa',
					// 	params: {
					// 		id: item.id,
					// 		current: this.current,
					// 		cardType: im.type,
					// 	}
					// });
					uni.$u.route({
						url: '/pageA/card_jici/index',
						params: {
							id:item.id,
							current:this.current,
							cardType:im.type
						}
					});
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	.d-list-box {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: #35bcff;
		border-radius: 10rpx;
	}

	.d-list-box1 {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(48, 182, 134);
		border-radius: 10rpx;
	}

	.d-list-box2 {
		box-shadow: 0rpx 13rpx 57rpx 0rpx rgba(8, 73, 162, 0.11);
		background: rgb(253, 168, 92);
		border-radius: 10rpx;
	}

	.d-tag {
		background: #f3f3f3;
		border-radius: 4rpx;
		height: 36rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #333333;
		padding: 0 18rpx;
	}

	.d-be {
		color: #bebebe;
	}

	.d-red {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-white {
		color: #ffffff;
		margin-top: 10rpx !important;
	}

	.d-xuxian {
		width: 100%;
		height: 1rpx;
		border-bottom: 1px dashed white;
		margin-top: 10rpx;
	}

	.d-bold {
		font-weight: bold;

	}
</style>